<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- <script src="js/flexible.js"></script> -->
    <title>暴躁熊猫火锅外卖</title>
    <meta name="description"
        content="暴躁熊猫火锅外卖是于2017年在“火锅侠”火锅外送品牌的基础上进行了转型升级创立而成。
    “暴躁熊猫”品牌创始人：邵文龙先生，和他的创始团队创立之初怀着对蒙式火锅及草原牛羊肉的情有独钟，把品牌发源地选择在内蒙古首府呼和浩特市，并努力不懈的钻研蒙式火锅汤料技术，整合内蒙草原牛羊肉产业链及创新研发独特的火锅外卖运营模式，致力于打造全国最具影响力的火锅外卖品牌，并把蒙式火锅及草原牛羊肉推广到全国。">
    <meta name="keywords" content="暴躁熊猫,暴躁熊猫外卖，火锅外卖加盟,暴躁熊猫火锅外卖，暴躁熊猫小火锅外卖，火锅外卖">
    <link rel="stylesheet" href="css/media.css">
    <link rel="stylesheet" href="fonts/index_iconfonts/iconfont.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">

</head>

<body>
    <!-- 头部，包含地址栏、 -->
    <header>
        <!-- 头部消息栏 -->
        <div class="header-box">
            <div class="w header-news">
                <div class="address-position">
                    <a href="#">
                        <i class="iconfont icon-togo"></i>
                        <span class="address-msg">成都市高新区新希望路国际大厦A9</span>
                        <span class="address-more"></span>
                    </a>
                </div>
                <a class="alerts iconfont icon-alert">
                    <i class="counting">6</i>
                </a>
            </div>
        </div>
        <!-- 下拉菜单，包含搜索栏和图片 -->
        <div class="drop-down">
            <div class="w search-box">
                <i class="iconfont icon-search"></i>
                <input type="search" placeholder="精品肥牛">
                <div class="head_contain w">
                    <!-- <img src="./images/made.png" alt=""> -->
                    <div class="banner">
                        <ul>
                            <li>
                                <img src="./images/menu/made.png" alt="">
                            </li>
                            <li>
                                <img src="./images/menu/caidan.png" alt="">
                            </li>
                            <li>
                                <img src="./images/menu/pop1.png" alt="">
                            </li>
                            <li>
                                <img src="./images/menu/pop2.png" alt="">
                            </li>
                            <li>
                                <img src="./images/menu/menulist pic1.png" alt="">
                            </li>
                        </ul>
                        <ol>
                            <!-- <li class="active"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li> -->
                        </ol>
                        <!-- 左右切换盒子 -->
                        <div>
                            <p class="left">&lt;</p>
                            <p class="right">&gt;</p>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="w drop-down-list">
                <li>
                    <a href="#" class="flex-align-center">
                        <div class="dropDown-listLogo" style="background-position: 0 0;"></div>
                        <p>锅底味型</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="flex-align-center">
                        <div class="dropDown-listLogo" style="background-position: -1.68rem 0;"></div>
                        <p>锅具餐具</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="flex-align-center">
                        <div class="dropDown-listLogo" style="background-position: -3.36rem 0;"></div>
                        <p>精选荤菜</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="flex-align-center">
                        <div class="dropDown-listLogo" style="background-position: -5.04rem 0;"></div>
                        <p>丸滑菜品</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="flex-align-center">
                        <div class="dropDown-listLogo" style="background-position: -6.72rem 0;"></div>
                        <p>精选素菜</p>
                    </a>
                </li>
            </ul>
        </div>
    </header>
    <!-- 正文，包含菜单列表和商品楼层区 -->
    <article>
        <ul class="w article-list">
            <li>
                <a href="#" class="flex-align-center">
                    <h5>爆品推荐</h5>
                    <p>无肉不欢</p>
                </a>
            </li>
            <li>
                <a href="#" class="flex-align-center">
                    <h5>丸滑类</h5>
                    <p>丸来丸去</p>
                </a>
            </li>
            <li>
                <a href="#" class="flex-align-center">
                    <h5>素菜类</h5>
                    <p>健康尝鲜</p>
                </a>
            </li>
            <li>
                <a href="#" class="flex-align-center">
                    <h5>蘸料调料</h5>
                    <p>调味生活</p>
                </a>
            </li>
        </ul>
        <ul class="w article-content">
            <li>
                <a href="#" class="article-content-link">
                    <img src="images/index_img/图层 1.png" alt="">
                    <div class="commodity-name">
                        <p>鲜猪黄喉</p>
                    </div>
                    <div class="commodity-price">
                        <span>￥</span><span>29.</span><span>99</span><span>/份</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="article-content-link">
                    <img src="images/index_img/图层 2.png" alt="">
                    <div class="commodity-name">
                        <p>鲜猪黄喉</p>
                    </div>
                    <div class="commodity-price">
                        <span>￥</span><span>29.</span><span>99</span><span>/份</span>
                        <i class="iconfont icon-tianjia"></i>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="article-content-link">
                    <img src="images/index_img/图层 3.png" alt="">
                    <div class="commodity-name">
                        <p>鲜猪黄喉</p>
                    </div>
                    <div class="commodity-price">
                        <span>￥</span><span>29.</span><span>99</span><span>/份</span>
                        <i class="iconfont icon-tianjia"></i>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="article-content-link">
                    <img src="images/index_img/图层 4.png" alt="">
                    <div class="commodity-name">
                        <p>鲜猪黄喉</p>
                    </div>
                    <div class="commodity-price">
                        <span>￥</span><span>29.</span><span>99</span><span>/份</span>
                        <i class="iconfont icon-tianjia"></i>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="article-content-link">
                    <img src="images/index_img/图层 5.png" alt="">
                    <div class="commodity-name">
                        <p>鲜猪黄喉</p>
                    </div>
                    <div class="commodity-price">
                        <span>￥</span><span>29.</span><span>99</span><span>/份</span>
                        <i class="iconfont icon-tianjia"></i>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="article-content-link">
                    <img src="images/index_img/图层 6.png" alt="">
                    <div class="commodity-name">
                        <p>鲜猪黄喉</p>
                    </div>
                    <div class="commodity-price">
                        <span>￥</span><span>29.</span><span>99</span><span>/份</span>
                        <i class="iconfont icon-tianjia"></i>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="article-content-link">
                    <img src="images/index_img/图层 7.png" alt="">
                    <div class="commodity-name">
                        <p>鲜猪黄喉</p>
                    </div>
                    <div class="commodity-price">
                        <span>￥</span><span>29.</span><span>99</span><span>/份</span>
                        <i class="iconfont icon-tianjia"></i>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="article-content-link">
                    <img src="images/index_img/图层 8.png" alt="">
                    <div class="commodity-name">
                        <p>鲜猪黄喉</p>
                    </div>
                    <div class="commodity-price">
                        <span>￥</span><span>29.</span><span>99</span><span>/份</span>
                        <i class="iconfont icon-tianjia"></i>
                    </div>
                </a>
            </li>
        </ul>
    </article>
    <!-- 科普栏 -->
    <div class="science-box">
        <div class="w science-box-title">
            <h4>火锅科普</h4>
            <a href="#" class="iconfont icon-arrow">查看全部 </a>
        </div>
        <ul>
            <li class="w">
                <a href="#">
                    <img src="images/index_img/科普2.png" alt="">
                    <div class="science-box-content">
                        <h5>刷火锅的黄喉其实不是猪牛的喉管</h5>
                        <p>黄喉不是“喉”</p>
                    </div>
                </a>
            </li>
            <li></li>
            <li class="w">
                <a href="#">
                    <img src="images/index_img/科普1.png" alt="">
                    <div class="science-box-content">
                        <h5>火锅锅底为什么用牛油</h5>
                        <p>牛油的三大好处</p>
                    </div>
                </a>
            </li>
            <li></li>
        </ul>
    </div>
    <footer>
        <div class="home active">
            <a href="index.html">
                <div>
                    <img src="./images/common/tab-index-active.png" alt="">
                </div>
                <span>首页</span>
            </a>
        </div>
        <div class="menu">
            <a href="Menu.html">
                <div>
                    <img src="./images/common/tab-category.png" alt="">
                </div>
                <span>菜单</span>
            </a>
        </div>
        <div class="shopcar">
            <a href="gouwuche.html">
                <div>
                    <img src="./images/common/tab-cart.png" alt="">
                </div>
                <span>购物车</span>
            </a>
        </div>

        <div class="mine">
            <a href="mine.html">
                <div>
                    <img src="./images/common/tab-mine.png" alt="">
                </div>
                <span>我的</span>
            </a>
        </div>

    </footer>
    <script src="./js/index.js"></script>
</body>

</html>